import React, {useEffect, useState} from "react";
import {Avatar, Button, Card, Col, Descriptions, Divider, Row, Space} from "antd";
import {useModel} from "@@/plugin-model/useModel";
import {UserOutlined} from "@ant-design/icons";
import {ModalForm, ProFormText, ProFormSelect} from "@ant-design/pro-components";
import message from "antd/es/message";
import {getAkSk, updateAkSk, updateUserInfo} from "@/services/zoffyApi/userController";

const Center: React.FC = () => {

  const {initialState,setInitialState} = useModel('@@initialState');
  const [akSkInfo, setAkSkInfo] = useState<API.AkSkVo>({accessKey: "*********", secretKey: "*********"})
  const [showing, setShowing] = useState<boolean>(false)

  const hideSecret = async () => {
    setAkSkInfo({accessKey: "*********", secretKey: "*********"});
    setShowing(false);
  }
  useEffect(()=>{
    setShowing(false);
  },[])
  return (
    <>
      <Row gutter={16}>
        <Col span={12}>
          <Card title={'个人信息'}>
            <Avatar size={64} icon={<UserOutlined/>}/>
            <Divider/>
            <Descriptions column={1}>
              <Descriptions.Item label={'账号'}>{initialState?.currentUser?.userAccount}</Descriptions.Item>
              <Divider/>
              <Descriptions.Item label={'用户名'}>{initialState?.currentUser?.userName}</Descriptions.Item>
              <Divider/>
              <Descriptions.Item label={'性别'}>{initialState?.currentUser?.gender}</Descriptions.Item>
              <Divider/>
              <Descriptions.Item label={'权限'}>{initialState?.currentUser?.userRole}</Descriptions.Item>
              <Divider/>
              <Descriptions.Item label={'创建时间'}>{initialState?.currentUser?.createTime}</Descriptions.Item>
              <Divider/>
            </Descriptions>
            <ModalForm
              width={500}
              title="信息修改"
              trigger={<Button type="primary">修改信息</Button>}
              submitter={{
                render: (props, defaultDoms) => {
                  return [
                    ...defaultDoms,
                  ];
                },
              }}
              onFinish={async (values) => {
                const res=await updateUserInfo(values);
                if(!res.data){
                  message.error("修改失败");
                  return true;
                }
                await setInitialState({
                  ...initialState,
                  currentUser: res.data,
                });
                return true;
              }}
            >

              <ProFormText
                width="md"
                name="userName"
                label="用户名"
                placeholder="请输入昵称"
              />

              <ProFormSelect
                width="xs"
                options={[
                  {
                    value: 0,
                    label: '男',
                  },
                  {
                    value: 1,
                    label: '女',
                  },
                ]}
                name="gender"
                label="性别"
              />
            </ModalForm>
          </Card>

        </Col>
        <Col span={12}>
          <Card title={'密钥信息'}>
            <Descriptions column={1}>
              <Descriptions.Item label={'AccessKey'}>{akSkInfo.accessKey}</Descriptions.Item>
              <Divider/>
              <Descriptions.Item label={'SecretKey'}>{akSkInfo.secretKey}</Descriptions.Item>
            </Descriptions>
            <Space align={"center"} size={20}>


              <ModalForm
                width={500}
                title="用户验证"
                modalProps={{
                  destroyOnClose: true,
                }}
                trigger={<Button type="primary" hidden={showing}>查看密钥</Button>}
                submitter={{
                  render: (props, defaultDoms) => {
                    return [
                      ...defaultDoms,
                    ];
                  },
                }}
                onFinish={async (values) => {
                  const res=await getAkSk(values);
                  if(!res.data){
                    message.error("获取密钥失败");
                    return true;
                  }
                  setAkSkInfo(res?.data|| {
                    accessKey: "*********",
                    secretKey: "*********",
                  })
                  setShowing(true);
                  message.success("获取密钥成功");
                  return true;
                }}
              >

                <ProFormText.Password
                  width="md"
                  name="userPassword"
                  label="账户密码"
                  placeholder="请输入密码"
                />
              </ModalForm>
              <Button type="primary" hidden={!showing} onClick={hideSecret}>
                隐藏密钥
              </Button>

              <ModalForm
                modalProps={{
                  destroyOnClose: true,
                }}
                width={500}
                title="用户验证"
                trigger={<Button type="primary" danger>重置密钥</Button>}
                submitter={{
                  render: (props, defaultDoms) => {
                    return [
                      ...defaultDoms,
                    ];
                  },
                }}
                onFinish={async (values) => {
                  const res=await updateAkSk(values);
                  if(!res.data){
                    message.error("重置密钥失败");
                    return true;
                  }
                  setAkSkInfo(res?.data||{
                    accessKey: "*********",
                    secretKey: "*********",
                  });
                  setShowing(true);
                  return true;
                }}
              >

                <ProFormText.Password
                  width="md"
                  name="userPassword"
                  label="账户密码"
                  placeholder="请输入密码"
                />
              </ModalForm>
            </Space>
          </Card>
        </Col>
      </Row>

    </>
  )
}
export default Center;
